<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 新建 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">接引状态管理</div>
            <div class="you"></div>
          </div>

          <!-- <div> -->
          <!--<el-button size="small" @click="">禁用</el-button>-->
          <!-- <el-button
              size="medium"
              @click="dialogVisible = true"
              type="primary"
              >新建</el-button
            > -->
          <!-- </div> -->
        </div>
        <div class="header-content"></div>
      </div>

      <el-row class="main-el-row-content">
        <el-table
          :data="showData"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
          @row-dblclick="dbclick"
          :cell-class-name="tableCellClassName"
        >
          <!-- <el-table-column type="index" label="序号" width="65"> -->
          <!-- </el-table-column> -->
          <el-table-column
            prop="tableName"
            label="数据名称"
            width="300"
            align="left"
          >
          </el-table-column>

          <el-table-column prop="targetRows" label="已接引条数" align="left">
          </el-table-column>
          <el-table-column prop="sourceRows" label="源数据条数" align="left">
          </el-table-column>
          <el-table-column
            prop="location"
            label="数据最新时间"
            width="200"
            align="left"
          >
            <template slot-scope="scope">
              <!-- <el-date-picker
                v-model="scope.row.location"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                @blur="hidePicker(scope)"
                :ref="scope.row.index + ',' + scope.column.index"
                v-if="scope.row.index + ',' + scope.column.index == currentCell"
              >
              </el-date-picker> -->
              <span active-color="#13ce66" inactive-color="#ff4949">
                {{ scope.row.location }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastedRunTime"
            label="接引运行最新时间"
            width="200"
            align="left"
          >
          </el-table-column>
          <el-table-column label="单次接引条数" align="left" width="150">
            <template slot-scope="scope">
              <!-- <el-input
                v-model="scope.row.rowNum"
                @blur="hideInput(scope)"
                :ref="scope.row.index + ',' + scope.column.index"
                v-if="scope.row.index + ',' + scope.column.index == currentCell"
              >
              </el-input> -->
              <span active-color="#13ce66" inactive-color="#ff4949">
                {{ scope.row.rowNum }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="70">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="begin(scope)"
              ></el-switch>
            </template>
          </el-table-column>
          <!--<el-table-column prop="keyField" label="比较字段" align="left">
        </el-table-column>-->
          <el-table-column label="接引进度" align="left" width="250">
            <template slot-scope="scope">
              <el-progress
                v-if="
                  (isNaN(scope.row.sourceRows / scope.row.targetRows)
                    ? 0
                    : Math.round(
                        (scope.row.targetRows / scope.row.sourceRows) * 10000
                      ) / 100.0) < 100
                "
                :text-inside="true"
                text-color="success"
                status="success"
                :stroke-width="20"
                :percentage="
                  isNaN(scope.row.sourceRows / scope.row.targetRows)
                    ? 0
                    : Math.round(
                        (scope.row.targetRows / scope.row.sourceRows) * 10000
                      ) / 100.0
                "
              ></el-progress>
              <el-progress
                v-else
                :text-inside="true"
                text-color="success"
                status="success"
                :stroke-width="20"
                :percentage="100"
              ></el-progress>
              <!-- {{scope.row.sourceRows / scope.row.targetRows}} -->
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="editSource(scope.row)" size="small"
                ><span class="el-icon-edit">编辑</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <div class="div-el-pagination" v-show="pageFlag">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          background
          layout="prev, pager, next, total, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 编辑 -->
    <el-dialog :visible.sync="dialogEdit" width="647px" height="395px">
      <div slot="title" class="dialog-title">
        <el-row class="red">
          <span class="dialog-title-text">编辑</span>
          <span class="dialog-title-you"></span>
          <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
        </el-row>
      </div>
      <el-form :model="form" label-width="150px" ref="form" :rules="rules">
        <el-form-item label="单次接引条数" prop="rowNum">
          <el-input v-model="form.rowNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据最新时间" prop="location">
          <!-- <el-input v-model="form.location" autocomplete="off"></el-input> -->
          <el-date-picker
            v-model="form.location"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="bg_button" @click="dialogEdit = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="bg_button"
          type="primary"
          @click="updateInfo('form')"
          >确 认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
percentage
<script>
import { post } from "../../utils/request";
export default {
  name: "ConnectionStatus",
  data() {
    let validcodeip = (rule, value, callback) => {
      const reg = /^(([1-9][0-9]{0,3})|10000)$/;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("输入格式不合法！"));
      }
    };
    return {
      pageSize: 11,
      currentPage: 1,
      showData: null,
      data_type: "",
      dialogEdit: false,
      linshi: "",
      pageFlag: true,
      total: 0,
      currentCell: null,
      timer: null, // 定时器
      form: {
        rowNum: "",
        location: "",
      },
      rules: {
        rowNum: [
          {
            required: true,
            message: "请输入一次接引多少条",
            trigger: "blur",
          },
          {
            validator: validcodeip,
            message: "一次最少输入1条,最多10000条",
            trigger: "blur",
          },
        ],
        location: [
          {
            required: true,
            message: "请选择更新日期",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.getadd();
  },
  methods: {
    getadd() {
      this.data_type = this.$route.query.item;
      //   console.log("值", this.data_type);
      this.init();
      this.setTime();
    },
    init() {
      this.getDataferConfigList();
    },
    getDataferConfigList() {
      var params = null;
      if (this.data_type) {
        console.log("有类型");
        params = {
          pageSize: this.pageSize, // 一页有几条数据
          pageNum: this.currentPage, // 当前点击的是第几页
          data_type: this.data_type,
        };
      } else {
        console.log("没有类型");
        params = {
          pageSize: this.pageSize, // 一页有几条数据
          pageNum: this.currentPage, // 当前点击的是第几页
        };
      }
      // console.log(params);
      // 发送请求
      post(
        "/api/idatamanage/dataTransferConfig/queryDataTransferConfig",
        params
      ).then((res) => {
        console.log("数据1", res.data.data);
        this.showData = res.data.data.dataList;
        this.total = res.data.data.total;
        this.showData.forEach((item) => {
          if (item.status == 1) {
            item.status = true;
          } else if (item.status == 0) {
            item.status = false;
          }
        });
      });
    },
    // 定时器 每隔多少时间获取一次后天数据
    setTime() {
      let that = this;
      let timer = setInterval(() => {
        console.log("测试");
        that.getDataferConfigList();
      }, 60000);

      // 离开当前页面时销毁定时器
      this.$once("hook:beforeDestroy", () => {
        clearInterval(timer);
        timer = null;
      });
    },

    shijianc(time) {
      let date = new Date(time);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    begin(item) {
      console.log(item.row);
      let params = null;
      if (item.row.status) {
        params = {
          id: item.row.id,
          status: "1",
        };
      } else if (item.row.status == false) {
        params = {
          id: item.row.id,
          status: "0",
        };
      }

      post(
        "/api/idatamanage/dataTransferConfig/updateDataTransferConfig",
        params
      ).then((res) => {
        console.log("数据", res);
        //   this.showData = res.data.data.rows;
      });
    },
    jieyin(item) {
      this.dialogEdit = true;
      this.linshi = item.row.id;
      console.log(item);
    },
    updateInfo() {
      // let locationTime = this.form.location.split("-");
      let params = {
        id: this.linshi,
        rowNum: this.form.rowNum,
        location: this.form.location,
      };
      console.log(params, "参数");
      post(
        "/api/idatamanage/dataTransferConfig/updateDataTransferConfig",
        params
      ).then((res) => {
        console.log("数据", res);
        if (res.data) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.init();
          this.dialogEdit = false;
        } else {
          this.$message({
            message: "更新失败",
            type: "error",
          });
        }
        this.showData = res.data.data.rows;
      });
    },
    // 点击的是第几页
    handleCurrentChange(currentPage) {
      this.listLoading = true;
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.getDataferConfigList();
    },
    editSource(res) {
      var that = this;
      that.dialogEdit = true;
      that.linshi = res.id;
      that.form.rowNum = res.rowNum;
      that.form.location = res.location;
    },
    // 时间设置
    addTime(item) {
      console.log(item);
    },
    // 给单元格绑定横向和竖向的index，这样就能确定是哪一个单元格
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    // 获得当前双击的单元格的横竖index，然后拼接成一个唯一字符串用于判断，并赋给currentCell
    // 拼接后类似这样："1,0","1,1",
    dbclick(row, column) {
      this.currentCell = row.index + "," + column.index;
      // 这里必须要setTimeout，因为在点击的时候，input才刚被v-if显示出来，不然拿不到dom
      setTimeout(() => {
        // 双击后自动获得焦点
        this.$refs[row.index + "," + column.index].focus();
      });
    },
    hidePicker(scope) {
      console.log("失去焦点时触发", scope.row);
      console.log(scope.row.location);
      // let locationString = scope.row.location
      // let locationString = scope.row.location.toString()
      //   let locationTime = scope.row.location.split(" ");
      //   let timeleft = locationTime[0].split("-");
      //   let timeright = locationTime[1].split(":");
      //   let locationString =
      //     timeleft[0] +
      //     timeleft[1] +
      //     timeleft[2] +
      //     timeright[0] +
      //     timeright[1] +
      //     timeright[2];
      // let locationString =locationTime[0]+locationTime[1]
      //   console.log(locationString);
      let params = {
        id: scope.row.id,
        location: scope.row.location,
      };
      console.log("修改时间传递的参数", params);

      post(
        "/api/idatamanage/dataTransferConfig/updateDataTransferConfig",
        params
      ).then((res) => {
        console.log("数据", res);
        if (res.data) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.init();
        } else {
          this.$message({
            message: "更新失败",
            type: "error",
          });
        }
        this.showData = res.data.data.rows;
      });
      this.currentCell = null;
    },
    // 当input失去焦点的时候，隐藏input
    hideInput(scope) {
      console.log("失去焦点时触发", scope.row);
      let params = {
        id: scope.row.id,
        rowNum: scope.row.rowNum,
      };
      console.log(params);
      post(
        "/api/idatamanage/dataTransferConfig/updateDataTransferConfig",
        params
      ).then((res) => {
        console.log("数据", res);
        if (res.data) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.init();
        } else {
          this.$message({
            message: "更新失败",
            type: "error",
          });
        }
        //   this.showData = res.data.data.rows;
      });
      this.currentCell = null;
    },
  },
  watch: {
    // 如果路由发生变化，再次执行该方法
    $route(to, from) {
      console.log(to);
      console.log(from);
      this.getadd();
    },
  },
};
</script>
<style src="../../assets/css/common.css"></style>
<style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
}
::v-deep .el-table {
  th {
    background-color: red($color: #000000) !important;
  }
}
.el-form-item__label {
  color: #84f2ff !important;
}

// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #c4d1dd;
// }
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

.el-dialog {
  background-color: rgba(8, 79, 140, 1);
}
::v-deep .el-table--striped {
  .el-table__body {
    tr.el-table__row--striped {
      td.el-table__cell {
        background: #0d1618;
      }
    }
  }
}
</style>